import { useCompanyInfo } from '@/hooks/useCompany';
import { CompanyInfo } from '@/types';

// 默认公司信息（作为后备）
const defaultCompanyInfo: CompanyInfo = {
  company_name: '环境工程咨询有限公司',
  company_description: '我公司成立于2000年，是一家集工程建设、设计、咨询、监理于一体的综合性环境工程企业。',
  company_introduction: '我公司成立于2000年，是一家集工程建设、设计、咨询、监理于一体的综合性建筑企业。公司拥有各类专业技术人员300余人，其中高级职称人员50余人，中级职称人员150余人。多年来，公司始终坚持"质量第一、安全第一、信誉第一"的经营理念，先后完成了多项省市级重点工程，获得了社会各界的广泛好评。公司连续多年被评为"重合同守信用企业"、"AAA级信用企业"等荣誉称号。',

  // 统计卡片默认值
  stat1_title: '年行业经验',
  stat1_value: '25+',
  stat2_title: '完成项目',
  stat2_value: '500',
  stat3_title: '专业团队',
  stat3_value: '50-100人',
  stat4_title: '客户满意度',
  stat4_value: '100%'
};

export default function AboutSection() {
  // 获取公司信息
  const { data: companyInfo, isLoading, error } = useCompanyInfo();

  // 使用API数据或默认数据
  const company = companyInfo || defaultCompanyInfo;

  // 不再需要计算年行业经验，直接使用统计卡片数据

  return (
    <section id="about" className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">关于我们</h2>
          <div className="w-20 h-1 bg-blue-600 mx-auto"></div>
        </div>

        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="order-2 md:order-1">
            <h3 className="text-2xl font-semibold text-gray-800 mb-4">公司简介</h3>

            {/* 公司简介 */}
            {company.company_description && (
              <p className="text-gray-600 mb-4 leading-relaxed">
                {company.company_description}
              </p>
            )}

            {/* 公司详细介绍 */}
            {company.company_introduction && (
              <p className="text-gray-600 mb-6 leading-relaxed">
                {company.company_introduction}
              </p>
            )}

            <div className="grid grid-cols-2 gap-6 mb-8">
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <div className="text-blue-600 text-4xl font-bold mb-2">
                  {company.stat1_value || '25+'}
                </div>
                <div className="text-gray-600">{company.stat1_title || '年行业经验'}</div>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <div className="text-blue-600 text-4xl font-bold mb-2">
                  {company.stat2_value || '500'}
                </div>
                <div className="text-gray-600">{company.stat2_title || '完成项目'}</div>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <div className="text-blue-600 text-4xl font-bold mb-2">
                  {company.stat3_value || '50-100人'}
                </div>
                <div className="text-gray-600">{company.stat3_title || '专业团队'}</div>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                <div className="text-blue-600 text-4xl font-bold mb-2">
                  {company.stat4_value || '100%'}
                </div>
                <div className="text-gray-600">{company.stat4_title || '客户满意度'}</div>
              </div>
            </div>

            <button type="button" className="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 transition-colors">
              查看更多公司信息 <i className="fa-solid fa-arrow-right ml-2"></i>
            </button>
          </div>
          
          <div className="order-1 md:order-2 relative">
            <div className="relative z-10 rounded-lg overflow-hidden shadow-xl transform md:rotate-2 transition-transform hover:rotate-0 duration-500">
              <img 
                src={
                  company.about_us_image || 
                  "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=modern+environmental+consulting+office+with+eco-friendly+design%2C+professional+photography%2C+high+quality&sign=fead9849860d61bf896b49f904072e56"
                } 
                alt="环境工程咨询公司办公室" 
                className="w-full h-auto"
                onError={(e) => {
                  // 如果上传的图片加载失败，使用默认图片
                  const target = e.target as HTMLImageElement;
                  if (target.src !== "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=modern+environmental+consulting+office+with+eco-friendly+design%2C+professional+photography%2C+high+quality&sign=fead9849860d61bf896b49f904072e56") {
                    target.src = "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=modern+environmental+consulting+office+with+eco-friendly+design%2C+professional+photography%2C+high+quality&sign=fead9849860d61bf896b49f904072e56";
                  }
                }}
              />
            </div>
            <div className="absolute -bottom-6 -left-6 w-64 h-64 bg-blue-100 rounded-lg -z-10"></div>
            <div className="absolute -top-6 -right-6 w-40 h-40 bg-blue-200 rounded-lg -z-10"></div>
          </div>
        </div>
      </div>
    </section>
  );
}